<blockquote class="layui-elem-quote">
    导航最多添加5个，目前已添加（{{.navTotal}}）个
</blockquote>
<div class="layui-btn-container">
    <button class="layui-btn data-add-btn" data-id="-1" data-level="0" data-type="1">添加导航</button>
    <button class="layui-btn" id="btn-expand">全部展开</button>
    <button class="layui-btn" id="btn-fold">全部折叠</button>
</div>

<table id="munu-table" class="layui-table" lay-filter="munu-table"></table>
<script type="text/html" id="currentTableBar">
    <a class="layui-btn layui-btn-xs data-count-edit" lay-event="create">添加</a>
    <a class="layui-btn layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
</script>

<script type="text/html" id="switchIsShow">


</script>

<script>

    layui.use(['table', 'treetable', 'form'], function () {
        let $ = layui.jquery;
        let table = layui.table;
        let form = layui.form;
        let treetable = layui.treetable;
        let renderTable = function(){
            treetable.render({
                treeColIndex: 1,
                treeIdName: 'id',
                treeSpid: "0",   //最上级的父级id
                treePidName: 'pid',
                elem: '#munu-table',
                url: '/admin/api/menu/list',
                page: false,
                cols: [[
                    {type: 'numbers'},
                    {field: 'menu_name', minWidth: 200, title: '权限名称'},
                    {field: 'authority', title: '权限标识'},
                    {field: 'menu_url', title: '菜单url'},
                    {field: 'sort', width: 80, align: 'center', title: '排序'},
                    {
                        field: 'is_show', title: '是否显示', width: 100, templet: function (d) {
                            check = "";
                            if (d.is_show === 1) {
                                check = "checked";
                            }
                            return '<input type="checkbox" name="is_show" data-id="' + d.id + '" value="' + d.is_show + '" lay-skin="switch" lay-text="开启|隐藏"lay-filter="isShow" ' + check + ' >';
                        }, unresize: true
                    },
                    {
                        field: 'isMenu', width: 80, align: 'center', templet: function (d) {
                            if (d.level === 3) {
                                return '<span class="layui-badge layui-bg-gray">按钮</span>';
                            } else if (d.level === 1) {
                                return '<span class="layui-badge layui-bg-blue">导航</span>';
                            } else {
                                return '<span class="layui-badge-rim">菜单</span>';
                            }
                        }, title: '类型'
                    },
                    {
                        align: 'center', title: '操作', templet: function (d) {
                            let button = '';
                            if (d.level === 0) {//首页不显示按钮
                                return button;
                            }
                            if (d.level !== 3) {
                                button += '<a class="layui-btn layui-btn-xs  data-add-btn" data-id="' + d.id + '" data-type="2" data-level="' + d.level + '">添加</a>';
                            }
                            button += '<a class="layui-btn layui-btn-primary layui-btn-xs data-edit-btn" data-id="' + d.id + '" data-type="2" data-level="' + d.level + '">编辑</a>\n';
                            return button
                        }
                    }

                ]],
                done: function () {
                    //重新加载工具
                    bindTableToolbarFunction()
                }
            });
        };
        //执行一个 table 实例
        renderTable()


        // ==================== 定义事件处理 ====================
        // 绑定事件集合处理(表格加载完毕和表格刷新的时候调用)
        function bindTableToolbarFunction() {
            // 监听添加操作
            $(".data-add-btn").on("click", function (d) {
                let id = d.delegateTarget.dataset['id'];
                let type = d.delegateTarget.dataset['type'];
                let level = d.delegateTarget.dataset['level'];
                let title = '添加';
                let index = layer.open({
                    title: title,
                    type: 2,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: '/admin/menu/create?type=' + type + "&id=" + id + "&level=" + level,
                    end: function () {
                        window.location.reload()
                    }
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });

                return false;
            });

            // 监听添加操作
            $(".data-edit-btn").on("click", function (d) {
                let id = d.delegateTarget.dataset['id'];
                let type = d.delegateTarget.dataset['type'];
                let level = d.delegateTarget.dataset['level'];
                let title = '添加';
                let index = layer.open({
                    title: title,
                    type: 2,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: '/admin/menu/edit?type=' + type + "&id=" + id + "&level=" + level,
                    end: function () {
                        window.location.reload()
                    }
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });

                return false;
            });

            $('#btn-expand').click(function () {
                treetable.expandAll('#munu-table');
            });

            $('#btn-fold').click(function () {
                treetable.foldAll('#munu-table');
            });

            //监听是否显示操作
            form.on('switch(isShow)', function (obj) {
                let is_show = 0;
                if (obj.elem.checked) {
                    is_show = 1
                }
                $.ajax({
                    url: '/admin/api/menu/edit',
                    type: "POST",
                    data: {'id': obj.elem.dataset['id'], 'is_show': is_show},
                    dataType: "json",
                    beforeSend: function () {
                        load = layer.load(2);
                    },
                    complete: function () {
                        layer.close(load)
                    },
                    success: function (data) {
                        if (data.code === 1) {
                            // 关闭弹出层
                            layer.msg(data.message, {icon: 1, title: "success"});
                        } else {
                            layer.msg(data.message, {icon: 2, title: "error"})
                        }
                    }
                });
            });

        }



    });


</script>